<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">

	<head>
		<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/login.png}">
		<meta charset="utf-8" />
		<title>用户登录</title>
		<link rel="stylesheet" type="text/css" th:href="@{/css/login.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"  />
		<link rel="stylesheet" type="text/css" th:href="@{/css/footer.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/drag.css}" />
		<style type="text/css">
			.slidetounlock{
				font-size: 12px;
				background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
				-webkit-background-clip:text;
				-webkit-text-fill-color:transparent;
				-webkit-animation:slidetounlock 3s infinite;
				-webkit-text-size-adjust:none
			}
			@-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}

		</style>
	</head>

	<body class="relative">
		<div th:insert="head::topbar"></div>
		<div class="bg">
			<div class="banner">
			</div>
			
			<div class="container">
				<div class="container2">
				<div class="header fl">
					<div class="phoneLogin fl">
						<a href="#">手机号登陆</a>
					</div>
					<div class="line fl">

					</div>
					<div class="emailLogin fl">
						<a href="#">邮箱登陆</a>
					</div>
					<div class="clear">

					</div>
				</div>
				<div class="clear">

				</div>
				<div class="part1">
					<div class="passwordLogin">
						<div class="password">
							<a href="#">使用密码验证登陆</a>
						</div>
					</div>
					<form action="/customerLogin/phoneMessageLogin" class="registerform">
						<div class="input_box">
							<div class="left fl">
								<img th:src="@{/img/img-24.png}" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input type="text" name="customerPhone" class="num" placeholder="请输入手机号" value="" datatype=" /^0?(13|14|15|17|18|19)[0-9]{9}$/" nullmsg="请输入手机号" errormsg="手机号格式错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<!--滑块-->
						<div class="jigsaw">
							<!--	<div class="right fl">
                                    <img th:src="@{/img/img-19.png}" />
                                </div>
                                <div class="text fl">
                                向右滑动滑块填充拼图
                                </div>
                                <div class="clear">

                                </div>-->
							<div id="wrapper">
								<div id="drag">
									<div class="drag_bg"></div>
									<div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">
										请按住滑块，拖动到最右边
									</div>
									<div class="handler handler_bg"></div>
								</div>
							</div>
							<div class="clear">

							</div>
						</div>
						<!--滑块-->
						<div class="code">
							<input type="tel" class="fl" maxlength="6" placeholder="请输入短信验证码" name="phoneCode" data-max-length="6">
							<div class="getcode fl">
								<a href="javascript:void(0);" class="tabfocus getsmscode" id="auto-id-1535009757627">获取验证码</a>
							</div>
							<div class="code_img">
								<img th:src="@{/img/img-142.jpg}"/>
								<span>换一张</span>
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="Validform_checktip"></div>
						<div class="login_box">
							<input type="submit" style="width: 100%;height: 58px; color: white; background-color: #b4a078;border: none;cursor:pointer" tabindex="8"  th:value="登录">
<!--						<a id="submitBtn"  href="personal-center.html">登 录</a>-->
						</div>
					</form>

					<div class="foot">
						<div class="first_img fl">
							<a href=""><img th:src="@{/img/img-20.png}" /></a>
						</div>

						<div class="sec_img fl">
							<a href=""><img th:src="@{/img/img-21.png}" /></a>
						</div>
						<div class="image fl">
							<a href=""><img th:src="@{/img/img-22.png}" /></a>
						</div>
						<div class="image fl">
							<a href=""><img th:src="@{/img/img-23.png}" /></a>
						</div>

						<div class="txt2 rl">
							<a class="forgetpwdReg" target="_blank" href="#">遇到问题？</a>
						</div>
						<div class="txt rl location">

							<a class="u-regbtn bgcolor tabfocus" target="_self" th:href="@{/customerLogin/register}">手机快捷注册</a>
						</div>
						<div class="clear">

						</div>

					</div>
				</div>
				<div class="part2">
					<div class="box">
						<form action="/customerLogin/EmailLogin" method="post" class="registerform">

							<div class="input_box2">
								<div class="left fl">
									<img th:src="@{/img/img-25.png}" />
								</div>

								<div class="line2 fl">

								</div>
								<div class="tel fl">
									<input class="ema" type="text" placeholder="邮箱账号" value=""  name="customerEmail" datatype="e" nullmsg="请输入账号" errormsg="账号格式错误" />
								</div>
								<div class="clear">

								</div>
							</div>
							<div class="input_box3">
								<div class="left fl">
									<img th:src="@{/img/img-26.png}" />
								</div>

								<div class="line2 fl">

								</div>
								<div class="tel fl">
									<input type="password" class="pass"   placeholder="请输入密码" value="" datatype="*6-15" id="passwordold" name="customerPassword" nullmsg="请输入密码" errormsg="密码错误" />
								</div>
								<div class="clear">

								</div>
							</div>
<!--					<div class="Validform_checktip"></div>-->
							<div class="login_box">
<!--								<input id="submitBtn" tabindex="8" class="u-loginbtn btncolor tabfocus  login_box3" type="submit" value="登 录">-->
								<input type="submit" style="width: 100%;color: white; height: 58px; background-color: #b4a078;border: none;cursor:pointer" tabindex="8"  th:value="登录">
							</div>
					</form>
					</div>

					<div class="foot">
						<div class="first_img fl">
							<a href=""><img th:src="@{/img/img-20.png}" /></a>
						</div>

						<div class="sec_img fl">
							<a href=""><img th:src="@{/img/img-21.png}" /></a>
						</div>
						<div class="image fl">
							<a href=""><img th:src="@{/img/img-22.png}" /></a>
						</div>
						<div class="image fl">
							<a href=""><img th:src="@{/img/img-23.png}" /></a>
						</div>

						<div class="txt2 rl">
							<a class="forgetpwdReg" target="_blank" href="#">遇到问题？</a>
						</div>
						<div class="txt rl">
							<a class="u-regbtn bgcolor tabfocus" target="_self" th:href="@{/customerLogin/register}">手机快捷注册</a>
						</div>
						<div class="clear">

						</div>

					</div>
				</div>
				<div class="part3">
					<form action="/customerLogin/phoneLogin" class="registerform" method="post">
						<div class="noteLogin">
							<div class="note">
								<a href="#">短信快捷登陆</a>
							</div>
						</div>
						<div class="input_box">
							<div class="left fl">
								<img th:src="@{/img/img-24.png}" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input type="text" class="num" name="customerPhone" id="" placeholder="请输入手机号" value="" datatype=" /^0?(13|14|15|17|18|19)[0-9]{9}$/" nullmsg="请输入手机号" errormsg="手机号格式错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="input_box3">
							<div class="left3 fl">
								<img th:src="@{/img/img-26.png}" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input type="password" class="pass"   placeholder="请输入密码" value="" datatype="*6-15" id="1" name="customerPassword" nullmsg="请输入密码" errormsg="密码错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="Validform_checktip"></div>
						<div class="login_box">
							<input type="submit" style="width: 100%;color: white; height: 58px; background-color: #b4a078;border: none;cursor:pointer" tabindex="8"  th:value="登录">
						</div>
					</form>



					<div class="foot">
						<div class="first_img fl">
							<a href=""><img th:src="@{/img/img-20.png}" /></a>
						</div>

						<div class="sec_img fl">
							<a href=""><img th:src="@{/img/img-21.png}" /></a>
						</div>
						<div class="image fl">
							<a href=""><img th:src="@{/img/img-22.png}" /></a>
						</div>
						<div class="image fl">
							<a href=""><img th:src="@{/img/img-23.png}" /></a>
						</div>

						<div class="txt2 rl">
							<a class="forgetpwdReg" href="#">遇到问题？</a>
						</div>
						<div class="txt rl">
							<a class="u-regbtn bgcolor tabfocus" target="_self" th:href="@{/customerLogin/register}">手机快捷注册</a>
						</div>
						<div class="clear">

						</div>

					</div>
				</div>
				</div>
			</div>
			
		</div>
		<div th:replace="footer::#footbar"></div>


		<script type="text/javascript" th:src="@{/js/jquery-1.12.4.min.js}"  ></script>
		<script type="text/javascript" th:src="@{/js/Validform_v5.3.2_min.js}"  ></script>
		<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"  ></script>
		<script type="text/javascript" th:src="@{/js/drag.js}"  ></script>

		<script type="text/javascript">
			$(document).ready(function() {
				//底部侧边栏关闭
				$(".icon-sidebarx").click(function() {
					$(this).parents(".sidebar-b-bac").remove();
				});
				//右边侧边栏关闭
				$(".icon-subx").click(function() {
					$(this).parents(".sub-list").css("display", "none");
				});
				//右边hover弹窗input隐藏出现
				$(".sub-inputbox").click(function() {
					$(this).prev(".icon-inputx").css("opacity", 1);
				});
				//下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
				$(window).scroll(function() {
					var top = $(document).scrollTop();
					if(top > 200) {
						$(".sidebar-r-totop").css({
							display: 'block'
						});
						$(".navigation-fix").slideDown();
					} else {
						$(".sidebar-r-totop").css({
							display: 'none'
						});
						$(".navigation-fix").slideUp();
					}
				});
				//点击回到顶部，回到顶部
				$(".sidebar-r-totop").click(function() {
					$("html,body").animate({
						scrollTop: 0
					}, 500);
				});

			})
		</script>

		<script type="text/javascript">
			// $("form").Validform({
			// 	tiptype: 3,
			//
			// });
			$("#drag").drag();

			$(".phoneLogin a").click(function() {
				$(this).css("color","#333");
				$(".emailLogin a").css("color","#999");
				$(".part3").css("display", "none");
				$(".part2").css("display", "none");
				$(".part1").css("display", "block");

			})
			$(".emailLogin a").click(function() {
				$(this).css("color","#333");
				$(".phoneLogin a").css("color","#999");
				$(".part3").css("display", "none");
				$(".part1").css("display", "none");
				$(".part2").css("display", "block");

			})
			$(".password a").click(function() {
				$(".part2").css("display", "none");
				$(".part1").css("display", "none");
				$(".part3").css("display", "block");

			})
			$(".note a").click(function() {
				$(".part3").css("display", "none");
				$(".part1").css("display", "none");
				$(".part1").css("display", "block");

			})
			$(".password a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})

			$(".note a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})

			$(".txt a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})
			$(".txt2 a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})
			$(".foot a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#999999")
			})

			$(".num").change(function() {

				var reg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
				var flag = reg.test($(".num").val());
				if(flag) {
					$(".input_box").css("border", "1px solid #e8e8e8");
				} else {
					$(".input_box").css("border", "1px solid #e8e8e8");
				}

			})
			$(".ema").change(function() {

				var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
				var flag = reg.test($(".ema").val());
				if(flag) {
					$(".input_box2").css("border", "1px solid #e8e8e8");
				} else {
					$(".input_box2").css("border", "1px solid #e8e8e8");
				}

			})
			$(".pass").change(function() {

				var reg = /^[a-zA-Z0-9]{6,18}$/;
				var flag = reg.test($(".pass").val());
				if(flag) {
					$(".input_box3").css("border", "1px solid #e8e8e8");
				} else {
					$(".input_box3").css("border", "1px solid #e8e8e8");
				}

			})
			
			$(".login_box1").click(function (e) {
				var reg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
				var flag = reg.test($(".num").val());
				if (flag) {
					$(".input_box").css("border", "1px solid #e8e8e8");
					window.location.href="personal-center.html";
					
				} else{
					e.preventDefault();
					$(".input_box").css("border", "1px solid #e8e8e8");
					
				}
			})
			$(".login_box2").click(function (e) {
				var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
				var flag1 = reg.test($(".ema").val());
				var reg = /^[a-zA-Z0-9]{6,18}$/;
				var flag2 = reg.test($(".pass").val());
				
				if (flag1&&flag2) {
					$(".input_box2").css("border", "1px solid #e8e8e8");
					$(".input_box3").css("border", "1px solid #e8e8e8");
					window.location.href="personal-center.html";
					
				} else{
					e.preventDefault();
						$(".input_box2").css("border", "1px solid #e8e8e8");
					$(".input_box3").css("border", "1px solid #e8e8e8");
				}
			})
		</script>
		<script th:src="@{/layer-v3.1.1/layer/layer.js}" src="layer-v3.1.1/layer/layer.js"></script>
		<script type="text/javascript" th:inline="javascript">
			$(document).ready(
					function () {
						//alert([[${msg}]])
						if([[${msg}]]=="error") {
							layer.msg("请检查用户名和密码是否正确")
						}else if([[${msg}]]=="unexist"){
							layer.msg("用户不存在，请重新输入")
						}
					}
			)
		</script>
	</body>

</html>